<template>
	<view class="flex wh-full absolute">
		<view class="left">
			<uv-vtabs :chain="false" :list="tabs" keyName="title" @change="onChange"
				:bar-item-active-style="{color: app.globalData.primaryColor,fontweight: 800}"
				:bar-item-active-line-style="{background: app.globalData.primaryColor}">
			</uv-vtabs>
		</view>
		<scroll-view scroll-y class="wh-full white" v-if="dataInfo">
			<view class="cardBox p-10">
				<view class="card" v-for="item, index in dataInfo" :key="'card' + index" @click="categoryClick(item)">
					<image mode="aspectFit" class="w-full card-image" :src="item?.icon" lazy-load observeLazyLoad />
					<span class="cateName">{{ item.text }}</span>
				</view>
				<uv-empty v-if="dataInfo&&dataInfo?.length == 0"></uv-empty>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
	} from 'vue';
	const app = getApp();
	const tabs = ref([]);
	const dataInfo = ref(null)
	onLoad(() => {
		fatchOne();
	})

	const fatchOne = () => {
		let that = this
		app.get('api.auth.cate/index', {}).then(res1 => {
			let tabsArr = res1
			tabs.value = tabsArr
			let req = {
				pid: tabsArr[0].id
			}
			app.get('api.auth.cate/index', req).then(res2 => {
				dataInfo.value = res2
			})
		})
	}
	const onChange = (value) => {
		console.log(value, "当前分类数据");
		let pid = tabs.value[value].id
		let req = {
			pid
		}
		app.get('api.auth.cate/index', req).then(res2 => {
			dataInfo.value = res2
		})
	}
	const categoryClick = (value) => {
		app.vibrate()
		toGoodsLists({
			// cateids: value.id
			platform_cateids: value.id
		}, value.text)
	}
	const toGoodsLists = (value, val) => {
		uni.navigateTo({
			url: '/pages/goodsLists/goodsLists' + uni.$uv.queryParams(value),
			success: function(res) {
				// 通过eventChannel向被打开页面传送数据
				val && res.eventChannel.emit('setsearchValue', val)
			}
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.nut-tabs__titles {
			border-radius: 0 !important;
			background: transparent !important;

			.nut-tabs__titles-item.nut-tabs-active {
				box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.123);
				transform: scale(0.8);
				border-radius: 10px;
			}

			.nut-badge,
			.nut-tabs__titles-item__text {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}

		.nut-tabs__content {
			display: none;
		}

		.nut-col {
			height: 100%;
		}

		.uv-vtabs__bar-item {
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			//border-radius: 10px;
			//margin: 10px 4px;

			.uv-vtabs__bar-item--line {
				width: 5px !important;
				top: auto !important;
				bottom: auto !important;
				left: 5px !important;
				height: 20px !important;
				display: flex !important;
				justify-content: center !important;
				align-items: center !important;
			}

			.uv-vtabs__bar-item--value {
				overflow: hidden;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				display: -webkit-box;
				word-break: break-all;
			}
		}
	}

	.flex {
		height: 100%;
	}

	.left {
		position: sticky;
		height: 100%;
		padding: 0;

		view {
			height: 100%;
		}
	}

	.absolute {
		position: absolute;
	}
</style>

<style lang="scss" scoped>
	.white {
		background-color: white;
	}

	.cardBox {
		width: -webkit-fill-available;
		display: grid;
		grid-template: repeat(2, 1fr) / repeat(2, 1fr);
		gap: 10px;
		background-color: white;
		/* display: grid;
    grid-template-columns: auto auto;
    grid-gap: 10px;
    flex-wrap: wrap;
    column-count: 2;
    column-gap: 10px;*/
	}

	.card {
		//background: #f5f5f5;
		//box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.123);
		width: -webkit-fill-available;
		height: 110px;
		//padding: 4px;
		border-radius: $uni-border-radius-lg;
		overflow: hidden;
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cateName {
		font-size: 16px;
	}

	.card-image {
		border-radius: 10px;
	}

	.card:active {
		transform: scale(0.98);
		box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
	}
</style>